'use strict';
import React, {Component, PropTypes} from 'react';
import Flipsnap from './flipsnap';

import '../less/swiper.css'

class ReactSwipes extends Component {
    static propTypes = {
        swipeOptions: PropTypes.shape({distance: PropTypes.number, swTouchstart: PropTypes.func, swTouchmove: PropTypes.func, swTouchend: PropTypes.func})
    };

    static defaultProps = {
        swipeOptions: {},
        style: {
            wrapper: {
                boxSizing: 'border-box'
            },
            child: {}
        },
        className: ''
    };

    componentDidMount() {
        const {options, children} = this.props;
        let len = children.length;
        this.swipes = Flipsnap(this.refs.container, {distance: options.distance});
        // 各个阶段事件监听
        this.swipes.element.addEventListener('fstouchstart', function(ev) {
            options.swTouchstart && options.swTouchstart(ev);
        }, false);

        this.swipes.element.addEventListener('fstouchmove', function(ev) {
            console.log('move');
            console.log(ev)
            options.swTouchmove && options.swTouchmove(ev);
        }, false);

        this.swipes.element.addEventListener('fstouchend', ev => {
            console.log('end');

            options.swTouchend && options.swTouchend(ev);
        }, false);
    }

    // 注销
    componentWillUnmount() {
        this.swipes.destroy();
    }

    refresh() {
        this.swipes.refresh();
    }

    sub() {
        this.props.item(window.x)
    }

    render() {
        const {id, className, style, children} = this.props;
        return (
            <div style={style.wrapper} onClick={this.sub.bind(this)} className={className} ref="container">
                {children}
            </div>
        );
    }
}

export default ReactSwipes;
